<template>
  <div class="">
    <div
      v-for="(item, index) in informationList"
      :key="index"
      :class="type == index ? 'active' : 'none'"
      class="common-box unactivated"
      @click="clickDiv(item, index)"
    >
      {{ item.informationName }}
    </div>
  </div>
</template>

<script>
import { informationPage } from '@/api/industry'
import { mapMutations } from 'vuex'
export default {
  name: '',
  data() {
    return {
      type: 0,
      informationList: [],
    }
  },
  mounted() {
    this.getInformationList()
  },
  methods: {
    ...mapMutations(['SET_industryInformationId']),

    async getInformationList() {
      let { result } = await informationPage({ pageSize: 10000 })
      this.informationList = result.records
      this.clickDiv(result.records[0], 0)
    },
    clickDiv(params, index) {
      this.type = index
      this.$emit('onclick', params)
      // this.SET_industryInformationId(params.id)
      this.$store.commit('SET_industryInformationId', params.id)
    },
  },
  destroy() {},
}
</script>

<style lang="less" scoped>
.sider {
  padding: 10px 0;
}
.common-box {
  width: 180px;
  height: 40px;
  margin: 10px 30px;
  border-radius: 4px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.unactivated {
  background: var(--theme-container-bg);
  font-size: 0.14rem;
  font-weight: 500;
  color: #1388ff;
}
.active {
  background: #1388ff;
  font-size: 0.16rem;
  font-weight: bold;
  color: #0b3f73;
}
</style>
